<template>
	<view class="container">
		<page-header title="用户管理" subtitle="管理系统用户账号"></page-header>
		<view class="content-wrapper">
			<view class="card">
				<view class="card-header">
					<view class="search-box">
						<uni-easyinput
							v-model="searchParams.keyword"
							placeholder="输入用户名、昵称或邮箱搜索"
							@confirm="handleSearch"
							class="search-input"
						>
							<template #prefixIcon>
								<view class="icon-wrapper">
									<uni-icons type="search" size="16" color="#909399"></uni-icons>
								</view>
							</template>
						</uni-easyinput>
						<view class="button-group">
							<button type="primary" @click="handleSearch" class="search-btn">
								<uni-icons type="search" size="16" color="#606266"></uni-icons>
								<text class="btn-text">搜索</text>
							</button>
							<button type="primary" @click="handleRefresh" class="refresh-btn">
								<uni-icons type="refresh" size="16" color="#ffffff"></uni-icons>
								<text class="btn-text">刷新</text>
							</button>
							<button type="primary" @click="showAddUserModal" class="add-btn">
								<uni-icons type="plusempty" size="16" color="#ffffff"></uni-icons>
								<text class="btn-text">添加用户</text>
							</button>
						</view>
					</view>
				</view>
				
				<view class="table-wrapper">
					<view v-if="loading" class="loading-wrapper">
						<uni-load-more status="loading" :contentText="loadingText"></uni-load-more>
					</view>
					
					<uni-table 
						v-else-if="userList.length > 0 || searchParams.keyword"
						border 
						stripe 
						emptyText="暂无用户数据" 
						class="user-table"
					>
						<uni-tr class="table-header">
							<uni-th width="100" align="center">ID</uni-th>
							<uni-th width="150" align="center">用户名</uni-th>
							<uni-th width="150" align="center">昵称</uni-th>
							<uni-th width="200" align="center">邮箱</uni-th>
							<uni-th width="120" align="center">手机号</uni-th>
							<uni-th width="100" align="center">状态</uni-th>
							<uni-th width="180" align="center">注册时间</uni-th>
							<uni-th width="280" align="center">操作</uni-th>
						</uni-tr>
						<uni-tr v-for="item in userList" :key="item.id" class="table-row">
							<uni-td align="center">{{ item.id }}</uni-td>
							<uni-td align="center">{{ item.username }}</uni-td>
							<uni-td align="center">{{ item.nickname || '-' }}</uni-td>
							<uni-td align="center">{{ item.email }}</uni-td>
							<uni-td align="center">{{ item.mobile || '-' }}</uni-td>
							<uni-td align="center">
								<uni-tag 
									:text="item.status === 1 ? '正常' : '禁用'" 
									:type="item.status === 1 ? 'success' : 'error'"
									class="status-tag"
								/>
							</uni-td>
							<uni-td align="center">{{ formatDateTimeArray(item.registerTime) }}</uni-td>
							<uni-td align="center">
								<view class="action-btns">
									<view class="action-group">
										<button size="mini" class="action-btn edit-btn" @click="handleEdit(item)">
											<uni-icons type="compose" size="14" color="#409eff"></uni-icons>
											<text class="btn-text">编辑</text>
										</button>
										<button size="mini" class="action-btn delete-btn" @click="handleDelete(item)">
											<uni-icons type="trash" size="14" color="#f56c6c"></uni-icons>
											<text class="btn-text">删除</text>
										</button>
									</view>
									<view class="action-group">
										<button size="mini" class="action-btn role-btn" @click="showRoleModal(item)">
											<uni-icons type="staff" size="14" color="#67c23a"></uni-icons>
											<text class="btn-text">角色</text>
										</button>
										<button size="mini" class="action-btn reset-btn" @click="handleResetPwd(item)">
											<uni-icons type="locked" size="14" color="#909399"></uni-icons>
											<text class="btn-text">重置密码</text>
										</button>
									</view>
								</view>
							</uni-td>
						</uni-tr>
					</uni-table>
					<view v-else class="empty-state">
						<text class="empty-text">暂无数据</text>
					</view>
				</view>
				
				<view class="pagination-wrapper">
					<uni-pagination 
						show-icon 
						:total="total" 
						:pageSize="searchParams.pageSize" 
						:current="searchParams.current" 
						@change="handlePageChange"
						class="pagination"
					/>
				</view>
			</view>
		</view>
		
		<!-- 添加/编辑用户弹窗 -->
		<uni-popup ref="userFormPopup" type="dialog" class="custom-popup">
			<view class="modal-form">
				<view class="modal-header">
					<text class="modal-title">{{ editMode ? '编辑用户' : '添加用户' }}</text>
					<text class="modal-close iconfont icon-close" @click="closeUserForm"></text>
				</view>
				<view class="modal-body">
					<uni-forms ref="form" :model="userForm" :rules="rules" class="form-content">
						<uni-forms-item label="用户名" required name="username">
							<uni-easyinput v-model="userForm.username" placeholder="请输入用户名" :disabled="editMode" />
						</uni-forms-item>
						<uni-forms-item label="昵称" required name="nickname">
							<uni-easyinput v-model="userForm.nickname" placeholder="请输入昵称" />
						</uni-forms-item>
						<uni-forms-item label="邮箱" required name="email">
							<uni-easyinput v-model="userForm.email" placeholder="请输入邮箱" />
						</uni-forms-item>
						<uni-forms-item label="手机号" required name="mobile">
							<uni-easyinput v-model="userForm.mobile" placeholder="请输入手机号" />
						</uni-forms-item>
						<uni-forms-item v-if="!editMode" label="密码" required name="password">
							<uni-easyinput v-model="userForm.password" type="password" placeholder="请输入密码" />
						</uni-forms-item>
						<uni-forms-item label="状态" name="status">
							<uni-data-checkbox v-model="userForm.status" :localdata="statusOptions" />
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="modal-footer">
					<button type="default" class="cancel-btn" @click="closeUserForm">取消</button>
					<button type="primary" class="confirm-btn" @click="confirmUserForm">
						{{ editMode ? '保存修改' : '添加用户' }}
					</button>
				</view>
			</view>
		</uni-popup>
		
		<!-- 角色分配弹窗 -->
		<uni-popup ref="rolePopup" type="dialog" class="custom-popup">
			<view class="modal-form role-modal">
				<view class="modal-header">
					<text class="modal-title">分配角色 - {{ currentUser?.username }}</text>
					<text class="modal-close iconfont icon-close" @click="closeRolePopup"></text>
				</view>
				<view class="modal-body">
					<view class="role-search">
						<uni-easyinput
							v-model="roleSearch"
							placeholder="搜索角色名称或编码"
							class="search-input"
						>
							<template #prefixIcon>
								<text class="iconfont icon-search"></text>
							</template>
						</uni-easyinput>
					</view>
					<view class="role-list">
						<view v-if="roleList.length === 0" class="empty-tip">
							暂无角色数据
						</view>
						<view v-else v-for="role in filteredRoles" :key="role.value" class="role-item">
							<view class="role-label" @click="toggleRole(role.value)">
								<radio 
									:checked="selectedRole === role.value"
									:value="role.value"
									style="transform: scale(0.8);"
								/>
								<text :class="['role-text', {'selected-role': selectedRole === role.value}]">
									{{ role.text }}
									<text class="role-code">({{ role.code }})</text>
								</text>
								<text v-if="role.description" class="role-description">{{ role.description }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<button type="default" class="cancel-btn" @click="closeRolePopup">取消</button>
					<button type="primary" class="confirm-btn" @click="confirmUserRoles">保存</button>
				</view>
			</view>
		</uni-popup>
		
		<!-- 重置密码弹窗 -->
		<uni-popup ref="resetPwdPopup" type="dialog" class="custom-popup">
			<view class="modal-form">
				<view class="modal-header">
					<text class="modal-title">重置密码</text>
					<text class="modal-close iconfont icon-close" @click="closeResetPwdPopup"></text>
				</view>
				<view class="modal-body">
					<uni-forms ref="resetPwdForm" :model="resetPwdForm" :rules="resetPwdRules" class="form-content">
						<uni-forms-item label="新密码" required name="password">
							<uni-easyinput v-model="resetPwdForm.password" type="password" placeholder="请输入新密码" />
						</uni-forms-item>
						<uni-forms-item label="确认密码" required name="confirmPassword">
							<uni-easyinput v-model="resetPwdForm.confirmPassword" type="password" placeholder="请再次输入新密码" />
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="modal-footer">
					<button type="default" class="cancel-btn" @click="closeResetPwdPopup">取消</button>
					<button type="primary" class="confirm-btn" @click="confirmResetPwd">确认重置</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { formatDateTime } from '@/utils/format.js';
import userApi from '@/api/user.js';
import roleApi from '@/api/role.js';
import PageHeader from '@/components/page-header.vue';

export default {
	name: 'UserList',
	components: {
		PageHeader
	},
	data() {
		return {
			userList: [],
			total: 0,
			searchParams: {
				keyword: '',
				current: 1,
				pageSize: 10
			},
			loading: false,
			loadingText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中...',
				contentnomore: '没有更多数据了'
			},
			userForm: {
				id: null,
				username: '',
				nickname: '',
				email: '',
				password: '',
				mobile: '',
				status: 1
			},
			rules: {
				username: {
					rules: [
						{ required: true, errorMessage: '请输入用户名' },
						{ minLength: 3, maxLength: 20, errorMessage: '用户名长度必须在3-20位之间' },
						{ pattern: /^[\u4e00-\u9fa5a-zA-Z0-9_-]+$/, errorMessage: '用户名只能包含中文、字母、数字、下划线和连字符' }
					]
				},
				nickname: {
					rules: [
						{ required: true, errorMessage: '请输入昵称' },
						{ minLength: 2, maxLength: 20, errorMessage: '昵称长度必须在2-20位之间' }
					]
				},
				email: {
					rules: [
						{ required: true, errorMessage: '请输入邮箱' },
						{ format: 'email', errorMessage: '邮箱格式不正确' }
					]
				},
				mobile: {
					rules: [
						{ required: true, errorMessage: '请输入手机号' },
						{ pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' }
					]
				},
				password: {
					rules: [
						{ required: !this.editMode, errorMessage: '请输入密码' },
						{ minLength: 6, maxLength: 20, errorMessage: '密码长度必须在6-20位之间' }
					]
				}
			},
			editMode: false,
			currentUser: null,
			roleList: [],
			selectedRole: null,
			roleSearch: '',
			statusOptions: [
				{ text: '启用', value: 1 },
				{ text: '禁用', value: 0 }
			],
			resetPwdForm: {
				userId: null,
				password: '',
				confirmPassword: ''
			},
			resetPwdRules: {
				password: {
					rules: [
						{ required: true, errorMessage: '请输入新密码' },
						{ minLength: 6, maxLength: 20, errorMessage: '密码长度必须在6-20位之间' }
					]
				},
				confirmPassword: {
					rules: [
						{ required: true, errorMessage: '请确认密码' },
						{
							validateFunction: (rule, value, data, callback) => {
								if (value !== this.resetPwdForm.password) {
									callback('两次输入的密码不一致');
								}
								return true;
							}
						}
					]
				}
			}
		}
	},
	computed: {
		filteredRoles() {
			if (!this.roleSearch) return this.roleList;
			return this.roleList.filter(role => 
				role.text.toLowerCase().includes(this.roleSearch.toLowerCase())
			);
		}
	},
	onLoad(options) {
		this.initPage();
	},
	onShow() {
		this.initPage();
	},
	onReady() {
		this.initPage();
	},
	methods: {
		initPage() {
			this.loadData();
		},
		formatDateTimeArray(timeArray) {
			if (!timeArray || !Array.isArray(timeArray) || timeArray.length < 6) return '-';
			const [year, month, day, hour, minute, second] = timeArray;
			return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')} ${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:${String(second).padStart(2, '0')}`;
		},
		
		handleRefresh() {
			this.loadData();
		},
		async loadData() {
			if (this.loading) {
				return;
			}
			
			this.loading = true;
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			
			try {
				const res = await userApi.getUserList({
					current: 1,
					pageSize: 10,
					keyword: ''
				});
				
				if (res.code === 200 && res.data) {
					this.userList = res.data.records || [];
					this.total = res.data.total || 0;
					uni.showToast({
						title: '加载成功',
						icon: 'success'
					});
				} else {
					this.userList = [];
					this.total = 0;
					uni.showToast({
						title: res.message || '加载失败',
						icon: 'none'
					});
				}
			} catch (err) {
				this.userList = [];
				this.total = 0;
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				});
			} finally {
				this.loading = false;
				uni.hideLoading();
			}
		},
		
		handleSearch() {
			this.loadData();
		},
		
		handlePageChange(e) {
			this.searchParams.current = e.current;
			this.loadData();
		},
		
		showAddUserModal() {
			this.userForm = {
				id: null,
				username: '',
				nickname: '',
				email: '',
				password: '',
				mobile: '',
				status: 1
			};
			this.editMode = false;
			this.$refs.userFormPopup.open();
		},
		
		handleEdit(user) {
			this.userForm = {
				id: user.id,
				username: user.username,
				nickname: user.nickname || '',
				email: user.email || '',
				mobile: user.mobile || '',
				status: user.status
			};
			this.editMode = true;
			this.$refs.userFormPopup.open();
		},
		
		async confirmUserForm() {
			try {
				await this.$refs.form.validate();
				
				let res;
				if (this.editMode) {
					res = await userApi.updateUser(this.userForm);
				} else {
					const registerData = {
						username: this.userForm.username,
						nickname: this.userForm.nickname,
						email: this.userForm.email,
						mobile: this.userForm.mobile,
						password: this.userForm.password
					};
					res = await userApi.registerUser(registerData);
				}
				
				if (res.code === 200) {
					uni.showToast({
						title: this.editMode ? '修改成功' : '添加成功'
					});
					this.$refs.userFormPopup.close();
					this.loadData();
				} else {
					uni.showToast({
						title: res.message || (this.editMode ? '修改失败' : '添加失败'),
						icon: 'none'
					});
				}
			} catch (err) {
				uni.showToast({
					title: this.editMode ? '修改用户失败' : '添加用户失败',
					icon: 'none'
				});
			}
		},
		
		closeUserForm() {
			this.$refs.userFormPopup.close();
		},
		
		async handleDelete(user) {
			try {
				const res = await userApi.deleteUser(user.id);
				if (res.code === 200) {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
					this.loadData();
				} else {
					uni.showToast({
						title: res.message || '删除失败',
						icon: 'none'
					});
				}
			} catch (err) {
				uni.showToast({
					title: '删除用户失败',
					icon: 'none'
				});
			}
		},
		
		toggleRole(roleId) {
			this.selectedRole = this.selectedRole === roleId ? null : roleId;
		},
		
		async showRoleModal(user) {
			this.currentUser = user;
			this.selectedRole = null;
			
			try {
				if (this.roleList.length === 0) {
					await this.loadRoleList();
				}
				
				const res = await roleApi.getUserRoles(user.id);
				if (res.code === 200 && res.data && res.data.length > 0) {
					this.selectedRole = res.data[0].id;
				}
				this.$refs.rolePopup.open();
			} catch (err) {
				uni.showToast({
					title: '获取用户角色失败',
					icon: 'none'
				});
			}
		},
		
		closeRolePopup() {
			this.$refs.rolePopup.close();
			this.currentUser = null;
			this.selectedRole = null;
			this.roleSearch = '';
		},
		
		handleResetPwd(user) {
			this.resetPwdForm = {
				userId: user.id,
				password: '',
				confirmPassword: ''
			};
			this.$refs.resetPwdPopup.open();
		},
		
		async confirmResetPwd() {
			try {
				await this.$refs.resetPwdForm.validate();
				
				const res = await userApi.resetPassword({
					userId: this.resetPwdForm.userId,
					newPassword: this.resetPwdForm.password
				});
				
				if (res.code === 200) {
					uni.showToast({
						title: '密码重置成功'
					});
					this.$refs.resetPwdPopup.close();
				} else {
					uni.showToast({
						title: res.message || '密码重置失败',
						icon: 'none'
					});
				}
			} catch (err) {
				uni.showToast({
					title: '重置密码失败',
					icon: 'none'
				});
			}
		},
		
		closeResetPwdPopup() {
			this.$refs.resetPwdPopup.close();
			this.resetPwdForm = {
				userId: null,
				password: '',
				confirmPassword: ''
			};
		},
		
		async confirmUserRoles() {
			if (!this.currentUser) {
				return;
			}
			
			if (!this.selectedRole) {
				uni.showToast({
					title: '请选择一个角色',
					icon: 'none'
				});
				return;
			}
			
			try {
				const res = await roleApi.assignUserRoles({
					userId: this.currentUser.id,
					roleIds: [this.selectedRole]
				});
				
				if (res.code === 200) {
					uni.showToast({
						title: '角色分配成功',
						icon: 'success'
					});
					this.$refs.rolePopup.close();
					await this.loadData();
				} else {
					uni.showToast({
						title: res.message || '角色分配失败',
						icon: 'none'
					});
				}
			} catch (err) {
				uni.showToast({
					title: '角色分配失败',
					icon: 'none'
				});
			}
		},
		
		async loadRoleList() {
			try {
				const res = await roleApi.getAllRoles();
				
				if (res.code === 200) {
					this.roleList = (res.data || []).map(role => ({
						value: role.id,
						text: role.roleName,
						code: role.roleCode,
						description: role.description
					}));
				} else {
					uni.showToast({
						title: res.message || '获取角色列表失败',
						icon: 'none'
					});
				}
			} catch (err) {
				this.roleList = [];
				uni.showToast({
					title: '获取角色列表失败',
					icon: 'none'
				});
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #f5f7fa;
}

.content-wrapper {
	padding: 24px;
	min-width: 1200px;
	overflow-x: auto;
}

.card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	transition: all 0.3s ease;
	
	&:hover {
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
	}
}

.card-header {
	padding: 24px;
	border-bottom: 1px solid #ebeef5;
	background: linear-gradient(to right, #ffffff, #f8f9fa);
}

.search-box {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
	gap: 12px;
	flex-wrap: wrap;
}

.search-input {
	flex: 1;
	min-width: 200px;
	max-width: 400px;
	height: 36px;
	padding: 0 12px;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	font-size: 14px;
	transition: all 0.3s;
	background-color: #fff;
}

.search-input:hover {
	border-color: #40a9ff;
}

.search-input:focus {
	border-color: #40a9ff;
	box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
	outline: none;
}

.button-group {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.btn {
	height: 36px;
	padding: 0 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
	white-space: nowrap;
}

.btn-search {
	background-color: #1890ff;
	color: white;
	min-width: 80px;
}

.btn-search:hover {
	background-color: #40a9ff;
}

.btn-refresh {
	background-color: #fff;
	color: #666;
	border: 1px solid #d9d9d9;
	min-width: 80px;
}

.btn-refresh:hover {
	color: #40a9ff;
	border-color: #40a9ff;
}

.btn-add {
	background-color: #52c41a;
	color: white;
	min-width: 100px;
}

.btn-add:hover {
	background-color: #73d13d;
}

.table-wrapper {
	padding: 24px;
	overflow-x: auto;
}

.user-table {
	width: 100%;
	min-width: 1200px;
	
	:deep(.uni-table) {
		border-radius: 8px;
		overflow: hidden;
		
		.uni-table-tr {
			transition: all 0.3s ease;
			
			&:hover {
				background-color: #f5f7fa;
			}
		}
		
		.uni-table-th {
			background: #f5f7fa;
			font-weight: 600;
			color: #606266;
			padding: 12px 8px;
		}
		
		.uni-table-td {
			padding: 12px 8px;
			color: #606266;
		}
	}
}

.status-tag {
	padding: 4px 12px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	
	&.uni-tag--success {
		background: #f0f9eb;
		color: #67c23a;
		border: 1px solid #e1f3d8;
	}
	
	&.uni-tag--error {
		background: #fef0f0;
		color: #f56c6c;
		border: 1px solid #fde2e2;
	}
}

.action-btns {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 8px;
	
	.action-group {
		display: flex;
		gap: 12px;
		justify-content: center;
	}
	
	.action-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		margin: 0;
		padding: 6px 12px;
		height: 32px;
		min-width: 80px;
		font-size: 13px;
		border-radius: 6px;
		white-space: nowrap;
		transition: all 0.3s ease;
		
		.btn-text {
			margin-left: 4px;
		}
		
		&.edit-btn {
			background-color: #ecf5ff;
			color: #409eff;
			border: 1px solid #d9ecff;
			
			&:hover {
				background-color: #409eff;
				color: #fff;
				border-color: #409eff;
			}
		}
		
		&.delete-btn {
			background-color: #fef0f0;
			color: #f56c6c;
			border: 1px solid #fde2e2;
			
			&:hover {
				background-color: #f56c6c;
				color: #fff;
				border-color: #f56c6c;
			}
		}
		
		&.role-btn {
			background-color: #f0f9eb;
			color: #67c23a;
			border: 1px solid #e1f3d8;
			
			&:hover {
				background-color: #67c23a;
				color: #fff;
				border-color: #67c23a;
			}
		}
		
		&.reset-btn {
			background-color: #f4f4f5;
			color: #909399;
			border: 1px solid #e9e9eb;
			
			&:hover {
				background-color: #909399;
				color: #fff;
				border-color: #909399;
			}
		}
	}
}

.pagination-wrapper {
	padding: 24px;
	display: flex;
	justify-content: center;
	
	:deep(.uni-pagination) {
		.uni-pagination__btn {
			border-radius: 6px;
			transition: all 0.3s ease;
			
			&:hover {
				background-color: #f5f7fa;
			}
		}
		
		.uni-pagination__num {
			border-radius: 6px;
			transition: all 0.3s ease;
			
			&:hover {
				background-color: #f5f7fa;
			}
			
			&.uni-pagination__num--active {
				background-color: #409eff;
				color: #ffffff;
			}
		}
	}
}

/* Modal Styles */
.modal-form {
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	
	.modal-header {
		padding: 20px 24px;
		border-bottom: 1px solid #ebeef5;
		background: linear-gradient(to right, #ffffff, #f8f9fa);
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.modal-title {
			font-size: 18px;
			font-weight: 600;
			color: #303133;
		}
		
		.modal-close {
			font-size: 20px;
			color: #909399;
			cursor: pointer;
			transition: all 0.3s ease;
			
			&:hover {
				color: #f56c6c;
			}
		}
	}
	
	.modal-body {
		padding: 24px;
		
		.form-content {
			:deep(.uni-forms-item) {
				margin-bottom: 20px;
				
				.uni-forms-item__label {
					font-weight: 500;
					color: #606266;
				}
				
				.uni-easyinput__content {
					background: #f5f7fa;
					border-radius: 8px;
					transition: all 0.3s ease;
					
					&:hover, &:focus {
						background: #ffffff;
						box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
					}
				}
			}
		}
	}
	
	.modal-footer {
		padding: 16px 24px;
		border-top: 1px solid #ebeef5;
		display: flex;
		justify-content: flex-end;
		gap: 12px;
		
		button {
			padding: 8px 20px;
			border-radius: 8px;
			font-size: 14px;
			font-weight: 500;
			transition: all 0.3s ease;
			
			&.cancel-btn {
				background: #f5f7fa;
				color: #606266;
				border: 1px solid #dcdfe6;
				
				&:hover {
					background: #e6e8eb;
					color: #409eff;
				}
			}
			
			&.confirm-btn {
				background: #409eff;
				color: #ffffff;
				border: 1px solid #409eff;
				
				&:hover {
					background: #66b1ff;
					border-color: #66b1ff;
				}
			}
		}
	}
}

/* Role Modal Specific Styles */
.role-modal {
	.modal-body {
		.role-search {
			margin-bottom: 20px;
			
			.search-input {
				:deep(.uni-easyinput__content) {
					background: #f5f7fa;
					border-radius: 8px;
					
					&:hover, &:focus {
						background: #ffffff;
						box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
					}
				}
			}
		}
		
		.role-list {
			max-height: 400px;
			overflow-y: auto;
			
			.role-item {
				padding: 12px;
				border-radius: 8px;
				transition: all 0.3s ease;
				cursor: pointer;
				
				&:hover {
					background: #f5f7fa;
				}
				
				.role-label {
					display: flex;
					align-items: center;
					gap: 8px;
					
					.role-text {
						font-size: 14px;
						color: #606266;
						
						&.selected-role {
							color: #409eff;
							font-weight: 500;
						}
						
						.role-code {
							font-size: 12px;
							color: #909399;
							margin-left: 4px;
						}
					}
					
					.role-description {
						font-size: 12px;
						color: #909399;
						margin-left: 8px;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 1200px) {
	.content-wrapper {
		padding: 16px;
		min-width: auto;
	}
	
	.card-header {
		padding: 16px;
	}
	
	.search-box {
		flex-direction: column;
		align-items: stretch;
	}
	
	.search-input {
		max-width: none;
	}
	
	.button-group {
		justify-content: flex-end;
	}
	
	.table-wrapper {
		padding: 16px;
	}
	
	.pagination-wrapper {
		padding: 16px;
	}
}

@media screen and (max-width: 768px) {
	.search-box {
		flex-direction: column;
		align-items: stretch;
	}
	
	.search-input {
		max-width: none;
	}
	
	.button-group {
		justify-content: flex-start;
	}
	
	.btn {
		flex: 1;
		min-width: 0;
	}
}
</style> 